<template>
  <div class="CurrentProcess">
    <div class="change_box">
      <div class="title">
        <p class="tip">运维事件单-当前处理</p>
        <div class="Button_Summary">
          <button class="goBack exceptions" @click="SummaryExport">导出各处理汇总表</button>
          <button @click="back" class="goBack">返回</button>
        </div>
      </div>
      <div class="main">
        <el-form ref="searchForm" :inline="true" class="demo-form-inline">
          <el-form-item label="系统名称">
            <!-- <el-autocomplete
              clearable
              class="inline-input"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="请输入系统名称"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-autocomplete> -->
            <el-select
              v-model="state"
              placeholder="请选择系统"
              style="width: 240px"
              filterable
              clearable
              @change="handleSelect_orgId"
            >
              <el-option
                v-for="(item, index) in restaurants"
                :key="index + 1"
                :label="item.value"
                :value="item.orgId"
              />
            </el-select>
          </el-form-item>
          <button @click="search" @keyup.enter="monitor()" class="btn reset" type="button">
            搜索
          </button>
        </el-form>
        <div class="button">
          <el-dropdown trigger="click" @command="handleCommand">
            <button class="state">
              <span>{{ command }}</span>
              <el-icon><CaretBottom /></el-icon>
            </button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="item" v-for="(item, index) in option1" :key="index">{{
                  item.text
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-dropdown trigger="click" @command="handleCommandseqType">
            <button class="state">
              <span>{{ commandseqType }}</span>
              <el-icon><CaretBottom /></el-icon>
            </button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="item" v-for="(item, index) in option2" :key="index">{{
                  item.text
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="tableBox">
        <!--  v-for="(item,index) in list" :key="index" -->
        <div class="scorllBox">
          <div class="sysListBox" v-for="(item, index) in list" :key="index">
            <span>{{ item.sysName }}</span>
            <!-- :class="[item.jjCount == 0 ? '' : 'Jjbox']" -->
            <div class="listBox">
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 1)"
                :class="[item.jjCount == 0 ? '' : 'Jjbox']"
              >
                <p>{{ item.jjCount }}</p>
                <p>紧急</p>
              </div>
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 2)"
                :class="[item.dealCount == 0 ? '' : 'Clbox']"
              >
                <p>{{ item.dealCount }}</p>
                <p>处理中</p>
              </div>
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 3)"
                :class="[item.reciveCount == 0 ? '' : 'Jsbox']"
              >
                <p>{{ item.reciveCount }}</p>
                <p>待接收</p>
              </div>
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 4)"
                :class="[item.ynCount == 0 ? '' : 'Ynbox']"
              >
                <p>{{ item.ynCount }}</p>
                <p>疑难</p>
              </div>
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 5)"
                :class="[item.changeCount == 0 ? '' : 'sjbgbox']"
              >
                <p>{{ item.changeCount }}</p>
                <p>数据变更</p>
              </div>
              <div
                class="bgSkyblue"
                @click="goProcessList(item.sysId, 6)"
                :class="[item.transferCount == 0 ? '' : 'sxclbox']"
              >
                <p>{{ item.transferCount }}</p>
                <p>转三线处理</p>
              </div>
            </div>
          </div>
          <!-- <div class="sysListBox">
            <span>系统名称</span>
            <div class="listBox">
              <div class="bgSkyblue" @click="goProcessList(item, 1)">
                <p>3</p>
                <p>紧急</p>
              </div>
              <div class="bgSkyblue" @click="goProcessList(item, 2)">
                <p>4</p>
                <p>处理中</p>
              </div>
              <div class="bgSkyblue" @click="goProcessList(item, 3)">
                <p>5</p>
                <p>待接收</p>
              </div>
              <div class="bgSkyblue" @click="goProcessList(item, 4)">
                <p>6</p>
                <p>疑难</p>
              </div>
              <div class="bgSkyblue" @click="goProcessList(item, 5)">
                <p>7</p>
                <p>数据变更</p>
              </div>
            </div>
          </div> -->
        </div>

        <!-- 分页 -->
        <el-pagination
          ref="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import {
    changeOrganization,
    getPendingCountPager,
    fmBizSummaryExport,
    download
  } from '@/http/api/operation';
  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const state = ref('');
  const orgId = ref('');
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const restaurants = reactive([]); // 系统名称集合
  const command = ref('处理中');
  const commandseqType = ref('倒序');
  const option1 = ref([
    { text: '紧急', value: 1 },
    { text: '处理中', value: 2 },
    { text: '待接收', value: 3 },
    { text: '疑难', value: 4 },
    { text: '数据变更', value: 5 },
    { text: '转三线处理', value: 6 }
  ]);
  const option2 = ref([
    { text: '正序', value: 0 },
    { text: '倒序', value: 1 }
  ]);
  // 状态类型
  const statusSeq = ref(2);
  //  排序类型
  const seqType = ref(1);
  const list = reactive([]);
  onMounted(() => {
    changeOrgan();
    enterKeyup();
    getPendingCountNewPager();
  });
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  const SummaryExport = () => {
    fmBizSummaryExport({ flag: '2' }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  const downloadlist = (type: string) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  const changeOrgan = () => {
    changeOrganization().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.orgName,
          orgId: item.orgId
        });
      });
    });
  };
  const getPendingCountNewPager = () => {
    getPendingCountPager({
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      sortType: JSON.stringify(seqType.value),
      sysId: orgId.value,
      type: JSON.stringify(statusSeq.value)
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      list.length = 0;
      (list as any).push(...res.data.rows);
      total.value = res.data.total;
    });
  };
  const search = () => {
    if (!state.value) {
      orgId.value = '';
    } else {
      state.value = state.value.replace(/(^\s*)|(\s*$)/g, '');
      if (!orgId.value) {
        orgId.value = state.value;
      }
    }
    pageNum.value = 1;
    getPendingCountNewPager();
    // this.getPendingCountPager();
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    getPendingCountNewPager();
  };
  const handleCurrentChange = (val) => {
    pageNum.value = val;
    getPendingCountNewPager();
  };
  const back = () => {
    router.push({
      name: 'restructure'
    });
  };
  // 选中的系统对应ID
  const handleSelect_orgId = (item) => {
    orgId.value = item;
  };

  // // 系统名过滤
  // const querySearch = (queryString: string, cb) => {
  //   const results = queryString ? restaurants.filter(createFilter(queryString)) : restaurants;
  //   // 调用 callback 返回建议列表的数据

  //   cb(results);
  // };
  // const createFilter = (queryString: striing) => {
  //   return (restaurant) => {
  //     if (restaurant.value) {
  //       //return restaurant.value.includes(queryString);
  //       return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  //     }
  //   };
  // };
  const handleCommand = (item) => {
    command.value = item.text;
    statusSeq.value = item.value;
    getPendingCountNewPager();
    // this.getPendingCountPager();
  };
  const handleCommandseqType = (item) => {
    commandseqType.value = item.text;
    seqType.value = item.value;
    getPendingCountNewPager();
  };
  const goProcessList = (value, type) => {
    router.push({
      name: 'current_processing',
      params: {
        value: value,
        type: type
      }
    });
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
</script>

<style lang="less" scoped>
  .CurrentProcess {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");
    .change_box {
      height: 100%;
      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .tip {
          height: 34px;
          line-height: 34px;
          font-size: 18px;
          font-weight: 400;
          color: #46545d;
          margin: 0;
          padding: 0;
        }
        .goBack {
          background: #007af5;
          min-width: 80px;
          height: 34px;
          border: none;
          color: #fff;
          font-size: 12px;
          font-weight: 400;
          &.exceptions {
            margin-right: 5px;
          }
        }
      }

      .main {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .demo-form-inline {
          display: flex;
          height: 34px;
          align-items: center;
          // width: 320px;
          // justify-content: space-around;
          // padding-top: 3%;
          // flex-wrap: wrap;
          // background: skyblue;
          :deep(.el-form-item) {
            margin-bottom: 0;
            // line-height: 34px;
            height: 100%;
            // &.leftMargiin {
            //   margin-left: 9px;
            // }
            :deep(.el-form-item__content) {
              line-height: 34px;
              //height: 43px;
              :deep(.inline-input) {
                width: 320px;
                height: 34px;
                :deep(.el-input__wrapper) {
                  width: 320px;
                  height: 34px;
                }
              }
            }
            :deep(.el-input__inner) {
              width: 320px;
              height: 34px;
              background: #ffffff;
              border-radius: 2px;
            }
          }

          :deep(input::placeholder) {
            font-size: 14px;
            font-weight: 400;
            color: #bbbbbb;
          }

          :deep(.el-form-item__label) {
            // color: #6fd7f7;
            font-size: 14px;
            font-weight: 400;
            color: #46545d;
            // height: 34px;
            // line-height: 34px;
          }
          .btn {
            width: 80px;
            height: 34px;
            line-height: 34px;
            background: #007af5;
            border-radius: 2px;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            border: 0;
            &.reset {
              margin: 0 10px;
            }
          }
        }
        .button {
          // width: 90%;
          // margin-bottom: 10px;
          // display: flex;
          // justify-content: space-around;
          .el-dropdown {
            vertical-align: top;
            .state {
              width: 150px;
              height: 34px;
              background: #fff;
              border: none;
              border-right: 1px solid #d9d9d9;
              font-size: 14px;
              font-weight: 400;
              color: #46545d;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20px;
            }
            .el-icon {
              font-size: 12px;
              color: #007af5;
            }
          }
        }
      }

      .tableBox {
        height: calc(100% - 98px);
        box-sizing: border-box;
        .scorllBox {
          // background: rgba(0, 0, 0, 0.1);
          height: calc(100% - 50px);
          width: 100%;
          margin-bottom: 15px;
          box-sizing: border-box;
          overflow-y: auto;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-content: flex-start;
          scrollbar-3dlight-color: #fff;
          // scrollbar-highlight-color:#fff;
          scrollbar-face-color: #e4e4e4;
          scrollbar-arrow-color: #666;
          scrollbar-shadow-color: #fff;
          scrollbar-darkshadow-color: #fff;
          scrollbar-base-color: #fff;

          .sysListBox {
            background: #fff;
            padding: 20px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 400;
            color: #444444;
            box-sizing: border-box;
            margin-bottom: 20px;
            width: 49%;
            height: 224px;
            span {
              font-size: 18px;
              font-weight: 400;
              color: #444444;
            }
            .listBox {
              display: flex;
              justify-content: space-between;
              padding-top: 20px;
              .bgSkyblue {
                width: 116px; // 58 65
                height: 116px;
                border: 14px solid #e5f1fe;
                border-radius: 50%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: center;
                p {
                  text-align: center;
                  margin: 0;
                  font-size: 16px;
                  font-weight: 400;
                  color: #666666;
                }
                p:first-child {
                  font-size: 24px;
                  font-weight: 600;
                  color: #444444;
                }
                &.Jjbox {
                  border: 14px solid #fd5500;
                }
                &.Clbox {
                  border: 14px solid #007af5;
                }
                &.Jsbox {
                  border: 14px solid #24ce9c;
                }
                &.Ynbox {
                  border: 14px solid #bc30c2;
                }
                &.sjbgbox {
                  border: 14px solid #f8b551;
                }
                &.sxclbox {
                  border: 14px solid #9ec81e;
                }
              }
            }
          }
        }
        .el-pagination {
          height: 34px;
          padding: 0;
          box-sizing: border-box;
          width: 50%;
          :deep(.el-pagination__total) {
            font-size: 14px;
            font-weight: 400;
            color: #bbbbbb;
            line-height: 34px;
          }

          :deep(.el-input__inner) {
            height: 30px;
            //width: 60px;
            background: #fff;
            //color: #66b1ff;
            color: #46545d;
          }
          :deep(button:disabled) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.el-pager li) {
            //background: rgba(0, 0, 0, 0.1);
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
            &.active {
              // color: #fff;
              color: #46545d;
            }
          }
          :deep(.btn-prev) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(.btn-next) {
            background: #fff;
            height: 34px;
            line-height: 34px;
            border: 1px solid #dddddd;
            //color: #66b1ff;
            color: #46545d;
            box-sizing: border-box;
          }
          :deep(span:not([class*='suffix'])) {
            color: #bbbbbb;
          }
        }
      }
    }
  }
</style>
